<template>
    <div class="home">
        <!-- 导航位置 -->
        <nav-bar class="navbar" ref="nav"> 
            <div slot="left" class="iconfont icon-fanhuijiantou_5f5f5f" @click="goBack"></div>
            <div class="title" slot="middle">
                <div v-for="(item,index) in titles" :key="index" class="title-item" :class="{isActive:currentIndex===index}" @click="titleClick(index)">{{item}}</div>
            </div>
        </nav-bar>
        <Scroll class="warpper" ref='scroll'  :pullUpLoad='true' @pullingUp="loadMore" :probe-type='3' @scrollTop='scrollTop'>
            <!-- 商品轮播图 -->
            <DetailSwiper :topImagesList="topImagesList" @detailImageLoad='detailImageLoad'></DetailSwiper>
            <!-- 商品信息 -->
            <DetailBaseInfo :goods="goods"></DetailBaseInfo>
            <!-- shop -->
            <DetailShop :shop="shop"></DetailShop>
            <!-- 商品展示 -->
            <DetailGoodsInfo :detailInfo='detailInfo' @goodsImageLoad='goodsImageLoad'></DetailGoodsInfo>
            <!-- 详情 -->
            <DetailParams ref="params" :goodsParam='goodsParam'></DetailParams>
            <!-- 评论 -->
            <DetailCommentInfo ref="comment" :commentInfo="commentInfo"></DetailCommentInfo>
            <!-- 商品推荐 -->
            <GoodsList ref="recommend" :goodsList="recommendList"></GoodsList>
        </Scroll>
        <!-- backtop -->
        <BackTop @click.native="detailToTop" v-show="isScrollTop"></BackTop>
        <!-- 底部bar -->
        <detail-bottom-bar @addToCart='addToCart'/>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue'
import Scroll from 'components/common/Scroll/Scroll'
import GoodsList from 'components/coments/GoodList/GoodsList'
// import BackTop from 'components/coments/BackTop/BackTop'

import DetailSwiper from './ChildComps/DetailSwiper'
import DetailBaseInfo from './ChildComps/DetailBaseInfo'
import DetailShop from './ChildComps/DetailShop'
import DetailGoodsInfo from './ChildComps/DetailGoodsInfo'
import DetailParams from './ChildComps/DetailParams'
import DetailCommentInfo from './ChildComps/DetailCommentInfo'
import DetailBottomBar from './ChildComps/DetailBottomBar'

import {getDetail,Goods,Shop,GoodsParam,getRecommend} from 'network/detail'

import {doc} from 'components/common/untils'
import {backTopMixin} from 'components/common/mixin'
export default {
    name:"Detail",
    components:{
        NavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShop,
        Scroll,
        DetailGoodsInfo,
        DetailParams,
        DetailCommentInfo,
        GoodsList,
        DetailBottomBar,
        // BackTop
    },
    mixins: [backTopMixin],
    data () {
        return {
            iid:null,
            titles:['商品','参数','评论','推荐'],
            currentIndex:0,
            topImagesList:[],
            goods:{},
            shop:{},
            detailInfo:{},
            goodsParam:{},
            commentInfo:[],
            recommendList:[],
            // 存放各个模块得offsetTop
            themeTopYs:[],
            currentIndex:0,
            //是否显示小箭头
            isScrollTop:false,
            
        }
    },
    created(){
           },
    mounted(){
        //详情页信息数据
        this.getdetail()
        //获取商品推荐数据
        this.getCommends()
        
    },
    methods:{
        //获取详情页数据方法
        getdetail(){
        this.iid = this.$route.params.iid
        getDetail(this.iid).then(res=>{
            console.log(res);
            const data = res.result
            this.topImagesList = res.result.itemInfo.topImages
            this.goods = new Goods(data.columns,data.itemInfo,data.shopInfo.services)
            this.shop = new Shop(data.shopInfo)
            this.detailInfo = data.detailInfo
            this.goodsParam = new GoodsParam(data.itemParams.info,data.itemParams.rule)
            if(data.rate.cRate !== 0){
					this.commentInfo = data.rate.list
            	}
        })
        this.$refs.scroll.finishPullUp
        },
        // 获取商品推荐数据方法
        getCommends(){
            getRecommend().then(res=>{
                // console.log(res);
                this.recommendList = res.data.list
            })
        },

        //监听title的监听事件
        titleClick(index){
            // console.log(1);
            this.currentIndex = index
            this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],200)
        },
        //监听小箭头返回事件
        goBack(){
            this.$router.go(-1)
        },
        //轮播图加载完事件
       detailImageLoad(){
            const refresh1 = doc(this.$refs.scroll.refresh,400)
            refresh1();
       },
       //商品加载完事件
       goodsImageLoad(){
           const refresh2 = doc(this.$refs.scroll.refresh,400)
            refresh2();
            this.$nextTick(()=>{
           this.themeTopYs=[]
           this.themeTopYs.push(0)
           //参数
           this.themeTopYs.push(this.$refs.params.$el.offsetTop)
           //评论 
           this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
           //推荐
           this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
           this.themeTopYs.push(Number.MAX_VALUE)
           console.log(this.themeTopYs);
       })
        


       },
       //上拉加载更多即上拉发请求
       loadMore(){
           this.getdetail()
       },
       //监听滚动事件 处理联动效果的反选
       scrollTop(position){
        const positionY = -position.y 
        for (let i = 0; i < this.themeTopYs.length-1; i++) {
            if (this.currentIndex!==i&&positionY>this.themeTopYs[i]&&positionY<this.themeTopYs[i+1] ) {
                // console.log(i);
                this.currentIndex=i
                this.$refs.nav.currentIndex=this.currentIndex
            }
        }
       positionY>1000?this.isScrollTop=true:this.isScrollTop=false
       },
       //toTop事件
    //    detailToTop(){
    //        this.$refs.scroll.scrollTo(0,0,500)
    //    }
    //加入购物车
    async addToCart(){
        //获取购物车需要展示的信息
        const product = {}
        product.iid = this.iid
        product.image = this.topImagesList[0]
        product.title = this.goods.title
        product.desc = this.goods.desc
        product.price = this.goods.realPrice
         const res = await this.$store.dispatch('addCart', product)
         await this.$message({
            message:res,
            type: 'success'
           
         })
           
    }
    }
};
</script>

<style lang="less" scoped>
.home{
    // 我们不想让内容将home撑高
    //为视口高度即可
        height: 100vh;
		background-color: #fff;
		position: relative;
		z-index: 9;
}
.warpper{
//  position: absolute;
// 		top: 44px;
// 		bottom: 0px;
// 		left: 0;
// 		right: 0;
    height: calc(100% - 44px);
    overflow: hidden;

}
.navbar{
//    background-color: #fff;
// 		position: relative;
// 		top: 0;
// 		left: 0;
// 		right: 0;
// 		z-index: 11;

}
.iconfont{
    margin-left: 10px;
}
.title{
    display: flex;
    font-size: 18px;
    .title-item{
        flex: 1;
    }
}
.isActive{
    color: red;
}

</style>

